<template>
    <!-- 内地用户及香港转账开户用户显示开户审核中页面 香港现场见面用户显示另一个审核中页面 -->
    <div class="examine f-cb">
        <div class="examineStatus f-cb">
            <div v-if="statusData.status==3">
                <!-- 审核中 -->
                <img src="@/assets/examine01.png" alt="" class="icon">
                <h2>{{$t('m.text26')}}</h2>
                <p class="gay">{{$t('m.text27')}}</p>
                <div>
                    <el-button type="primary" class="button" 
                    v-if="statusData.legalize_type==3 || statusData.legalize_type==2"
                    @click="SeeOpenStatus(statusData.legalize_type)">
                        {{$t('m.Checkaccountopeningprogress')}}
                    </el-button>
                    <div style="height:82px" v-else></div>
                </div>
                
            </div>
            <div v-else-if="statusData.status==4">
                <!-- 审核失败 -->
                <img src="@/assets/examine02.png" alt="" class="icon">
                <h2>{{$t('m.text28')}}</h2>
                <div style="text-align:left">
                    <p>{{$t('m.text28')}},{{$t('m.text29')}}</p>
                    <p class="gay" v-for="(item,index) in statusData.failFlow" :key="index" :class="item.status==0?'red':'green'">
                        {{index+1}}:{{item['reason_'+lang]}}
                    </p>
                </div>
                <el-button type="primary" class="button" @click="ChangeClick">{{$t('m.text30')}}</el-button>
            </div>
            <div v-else-if="statusData.status==2">
                <!-- 审核成功 -->
                <img src="@/assets/examine03.png" alt="" class="icon">
                <h2>{{$t('m.text31')}}</h2>
                <p class="gay">{{$t('m.text32')}}</p>
                <div style="height:82px"></div>
            </div>
        </div>
        <!-- 距离36像素 -->
        <div class="NextYouCan" v-if="JSON.stringify(statusData) !='{}'">
            <h2>{{$t('m.Nextyoucan')}}:</h2>
            <ul>
                <li>
                    <span class="Step">Step 1</span>
                    <p>{{statusData.terminal['terminal_'+lang]}}</p>
                    <el-button type="primary" class="button" @click="downloadLinks">{{$t('m.DownloadClient')}}</el-button>
                </li>
                <li>
                    <span class="Step">Step 2</span>
                    <p>{{$t('m.Deposit')}}</p>
                </li>
                <li>
                    <span class="Step">Step 3</span>
                    <p>{{$t('m.Agooddeal')}}</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {pageFlow} from "@/common/common";
    export default {
        components: {},
        data() {
            return{
               AuditStatus:1,//1 审核中 2 审核失败 3 审核成功
               MeetOnSite:false,//判断是不是香港现场见面用户 如果是显示查看开户进度
               statusData:{},
            }
        },
        computed:{
            info(){
                return JSON.parse(sessionStorage.getItem('info'))
            },
            lang(){
                //JSON.stringify
                return sessionStorage.getItem("lang")=='zh-CN'?'zh':sessionStorage.getItem("lang")=='zh-TW'?'tc':'en'
            }
        },
        mounted(){
            this.getOpenStatus();
            window.document.title = this.$t('m.examine')
        },
        methods:{
            getOpenStatus(){
                var _this = this;
                _this.$axios.get('/open/status')
                .then(res => {
                    if(res.data.code == 1){
                        //status 1:未开户，2已经开户(审核成功)，3待审核，4审核未通过，5待完善
                        if(res.data.data.status == 1 ||res.data.data.status == 5){
                            _this.$router.replace({path:'/documentType'})
                        }else{
                            sessionStorage.setItem('appointment',JSON.stringify(res.data.data.appointment))
                            _this.statusData = res.data.data;
                            sessionStorage.setItem('userType',res.data.data.user_type);
                        }
                    }else if(res.code == 401){
                        _this.$router.replace({path:'/'})
                    }else{
                        _this.$message({
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    
                })
                .catch(function(error) {
                    console.log(error)
                })
            },
            SeeOpenStatus(legalize_type){
                var _this = this;
                this.$router.replace({ path:'/indexEnd'});
            },
            ChangeClick(){
                sessionStorage.setItem('isModify',1)
                this.getflow();
            },
            getflow(page){
                var _this = this;
                pageFlow(page,res => {
                    var res = res.data;
                    if(res.code == 1){
                        sessionStorage.setItem('flowInfo',JSON.stringify(res.data))
                        if(res.data.page_info.type==2){
                            _this.$router.replace({ path:'/custom?id='+res.data.page_info.id});
                        }else{
                            _this.$router.replace({ path:'/'+res.data.page_info.url_path});
                        }
                    }else if(res.code == 401){
                         _this.$router.replace({path:'/'})
                    }else if(res.code == 102 || res.code == 103){
                        _this.$router.replace({path:'/examine'})
                    }else if(res.code == 104){
                        _this.$router.go(0)
                    }else{
                        this.$message({
                            message: res.msg,
                            type: "warning"
                        });
                    }
                })
            },
            downloadLinks(){
                window.open('#/download')
                //this.$router.push({ path:'/download'});
            }
        },
        watch:{
            'info.open_status':{
                handler(val,old){
                    console.log(val,'1111')
                }
            }
        },
    }
</script>

<style lang="less">
    .examine{
        width: 460px;
        margin:0 auto;
        .examineStatus{
            padding-top:66px;
            text-align: center;
            .icon{
                width: 76px;
                margin: 0 auto 34px;
                display: block;
            }
            h2{
                font-size: 20px;
                color: @000;
                line-height: 30px;
                margin-bottom:9px;
            }
            p{
                font-size: 14px;
                color: #404040;
                line-height:24px;
            }
            p.gay{
                color: @titleColor;
            }
            p.red{
               // color: @color;
            }
            p.green{
                //color: @green;
            }
            .button{
                width: 260px;
                margin:35px auto 27px;
            }
        }
        .NextYouCan{
            padding-top: 26px;
            h2{
                font-size: 20px;
                color: @404040;
                line-height: 40px;
                padding-bottom: 22px;
            }
            ul{
                width: 100%;
                position: relative;
            }
            ul:after{
                content: "";
                width: 1px;
                height: 83%;
                position: absolute;
                top:7.5px;
                left:3px;
                background: url(~@/assets/examine04.png) top center;
            }
            li{
                padding-left: 21px;
                margin-bottom: 32px;
                position: relative;
                .Step{
                    font-size: 14px;
                    color: @afb0b2;
                    line-height: 22px;
                    display: block;
                }
                p{
                    font-size: 14px;
                    color: @404040;
                    line-height: 22px;
                }
                .button{
                    margin-top: 7px;
                    width:120px;
                    height: 30px;
                    line-height: 30px;
                    padding: 0;
                }
            }
            li:after{
                content: "";
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background: @afb0b2;
                position: absolute;
                left:0;
                top:7.5px;
            }
        }
    }
</style>